<template>
  <el-form label-position="top" class="p-10">
    <el-form-item label="标题名称">
      <el-input v-model="activeData.extConfig.content"></el-input>
    </el-form-item>
    <el-form-item label="字体大小">
      <el-input-number
        v-model="activeData.extConfig.strSize"
        :min="1"
        :max="32"
        label="描述文字"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="字体粗细">
      <el-switch v-model="activeData.extConfig.strWeight" />
    </el-form-item>
    <el-form-item label="字体颜色">
      <div class="block">
        <el-color-picker
          v-model="activeData.extConfig.strColor"
        ></el-color-picker>
      </div>
    </el-form-item>

    <el-form-item label="对齐方式">
      <el-select v-model="activeData.extConfig.strAlign" placeholder="请选择">
        <el-option
          v-for="item in strAlignOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "titles-config",
  props: ["activeData"],
  data() {
    return {
      strAlignOptions: [
        {
          value: "center",
          label: "居中",
        },
        {
          value: "left",
          label: "居左",
        },
        {
          value: "right",
          label: "居右",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
